<template>
<div>
 <div class="film_item" v-for="(film_item) in FilmsList" :key="film_item.filmId">
   <div class="film_item_left">
     <img :src="film_item.poster">
   </div>
   <div class="film_item_center">
     <h2>{{film_item.name}}<span>{{film_item.item.name}}</span></h2>
     <p>评分：{{film_item.grade}}</p>
     <p class="actors">主演：{{film_item.actors | getActor}}</p>
     <p>{{film_item.nation}} | {{film_item.runtime}}分钟</p>
   </div>
   <div class="film_item_reght">
     <button>购票</button>
   </div>
 </div>
  <van-loading size="24px" v-show="!loading">加载中...</van-loading>
  <p v-show="noMore">已经加载完成!!!</p>
</div>
</template>

<script>
import { getFilmsList } from '../../../api/film'
export default {
  inject: ['home'],
  data () {
    return {
      FilmsList: [],
      pageNum: 1,
      pageSize: 10,
      totalPages: 1,
      loading: false,
      noMore: false
    }
  },
  created () {
    this.getFilmsList()
  },
  filters: {
    getActor (newValue) {
      let nameArr = newValue.map(item => {
        return item.name
      })
      return nameArr.join('、')
    }
  },
  methods: {
    onScroll (event) {
      // 获取滚动条距离顶部的距离
      let scrollTop = event.target.scrollTop
      // 滚动元素的可视高度
      let clientHeight = event.target.clientHeight
      // 滚动元素的内容高度
      let scrollHeight = event.target.scrollHeight
      // 如果内容高度-可视高度 <= 滚动距离代表已经到达底部了
      if (scrollHeight - clientHeight <= scrollTop && !this.loading) {
        // 滚动到了底部
        if (this.pageNum >= this.totalPages) {
          this.noMore = true
          this.loading = true
          return
        }
        this.pageNum++
        this.getFilmsList()
      }
    },
    getFilmsList () { // 封装加载数据的方法
      this.loading = true
      getFilmsList({
        cityId: 110100,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: 1,
        k: 2253369
      }).then((res) => {
        this.FilmsList = [...this.FilmsList, ...res.data.data.films]
        this.totalPages = Math.ceil(res.data.data.total / this.pageSize)
        this.loading = false
      })
    }
  },
  mounted () {
    this.home.$refs.homeEle.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy () {
    this.home.$refs.homeEle.removeEventListener('scroll', this.onScroll)
  }
}
</script>

<style scoped lang='scss'>
  .film_item{
    display: flex;
    height:90px;
    justify-content: flex-start;
    align-items: center;
    padding:15px 15px 15px 0;
    .film_item_left{
      flex-shrink: 1;
      img{
        width:66px;
        height:90px;
      }
    }
    .film_item_center{
      flex:1;
      overflow: hidden;
      padding: 0 10px;
      P{
        color:#797d82;
        font:13px/1.5 Tahoma,Helvetica,Arial,sans-serif;
      }
      .actors{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .film_item_reght{
      button{
      color:#ff5f16;
      width: 50px;
      height:25px;
      flex-shrink:1;
      border: 1px solid #ff5f16;
      background:#fff;
      border-radius: 4px;
      }
    }
  }
</style>
